import Taro, { Component } from '@tarojs/taro';
import { View, Picker, Text, RadioGroup } from '@tarojs/components';
import { AtTabBar, AtInput, AtIcon, AtButton, AtSwitch } from 'taro-ui';
import './index.scss';

export default class Index extends Component {
  constructor() {
    this.checkIndex = 0;
    this.state = {
      principalList: ['元', '万'],
      periodsList: ['年', '月', '日'],
      interestRateList: ['年利率', '月利率', '日利率'],
      periodsChecked: '年',
      principalChecked: '元',
      interestRateChecked: '年利率',
      principal: '',
      periods: '',
      interestRate: '',
      type: false,
      list: [
        {
          value: '算终值',
          checked: true,
        },
        {
          value: '算利率',
          checked: false,
        },
        {
          value: '算本金',
          checked: false,
        },
        {
          value: '算期数',
          checked: false,
        },
      ],
      current:0,
    };
  }

  onChange = (name, e) => {
    const checked = `${name}Checked`;
    this.setState({
      [checked]: this.state[`${name}List`][e.detail.value],
    });
  };
  handleClick=(current)=> {
    this.setState({current})
  }
  handleChange(name, value) {
    console.log(name, value);
    this.setState({
      [name]: value,
    });
    // 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
    return value;
  }
  setRadioSelect = value => {
    let { list } = this.state;
    list[this.checkIndex].checked = false;
    list[value].checked = true;
    this.checkIndex = value;
    this.setState({
      list,
    });
  };
  sumNumber=()=>{
    console.log(this.state)
  }
  pageOne(){
    const {
      principal,
      principalList,
      principalChecked,
      periodsList,
      periodsChecked,
      interestRateList,
      interestRateChecked,
      periods,
      interestRate,
      type,
      list,
      current,
    } = this.state;
    return (<View>          
      <AtInput
      title="本金"
      type="text"
      placeholder="请输入"
      value={principal}
      onChange={value => this.handleChange('principal', value)}
    >
      <View className="page-section">
        <View>
          <Picker
            mode="selector"
            range={principalList}
            onChange={e => this.onChange('principal', e)}
          >
            <View className="picker">
              {principalChecked}
              <AtIcon value="chevron-down" size="10" />
            </View>
          </Picker>
        </View>
      </View>
    </AtInput>
    <AtInput
      title="期数"
      type="text"
      placeholder="请输入"
      value={periods}
      onChange={value => this.handleChange('periods', value)}
    >
      <View className="page-section">
        <View>
          <Picker
            mode="selector"
            range={periodsList}
            onChange={e => this.onChange('periods', e)}
          >
            <View className="picker">
              {periodsChecked}
              <AtIcon value="chevron-down" size="10" />
            </View>
          </Picker>
        </View>
      </View>
    </AtInput>
    <AtInput
      title="利率"
      type="text"
      placeholder="请输入"
      value={interestRate}
      onChange={value => this.handleChange('interestRate', value)}
    >
      <View className="page-section">
        <View>
          <Picker
            mode="selector"
            range={interestRateList}
            onChange={e => this.onChange('interestRate', e)}
          >
            <View className="picker">
              %{interestRateChecked}
              <AtIcon value="chevron-down" size="10" />
            </View>
          </Picker>
        </View>
      </View>
    </AtInput>
    <AtSwitch
      title="高级选项"
      checked={type}
      border={false}
      color="#1aad19"
      onChange={e => {
        this.handleChange('type', e);
      }}
    />
    {type && (
      <View className="radio-button">
        {list.map((item, i) => {
          return (
            <View
              key={item.value}
              className={`radio-button-item ${
                item.checked ? 'radio-button-item-select' : ''
              }`}
              onClick={() => this.setRadioSelect(i)}
            >
              <Text>{item.value}</Text>
            </View>
          );
        })}
      </View>
    )}</View>)
  }
  pageTwo(){}
  pageThree(){}
  returnPage(current){
    console.log(current)
    if(current===0){
      return this.pageOne()
    }
    // if(current===1){
    //   return this.pageTwo()
    // }
    // if(current===2){
    //   return this.pageThree()
    // }
    return <View>1</View>
  }
  render() {
    const {
      current,
    } = this.state;
    return (
      <View className="container">
        <View className="page-body">
          {this.returnPage(this.state.current)}
        </View>
        <AtButton type="primary" onClick={this.sumNumber} customStyle={{ margin: '0 25rpx', marginTop: '50rpx' }}>
          开始计算
        </AtButton>
        <AtTabBar
          fixed
          tabList={[
            { title: '价值估算', iconType: 'folder' },
            { title: '复利计算', iconType: 'bullet-list' },
            { title: '定投计算', iconType: 'camera' },
            { title: '更多计算', iconType: 'folder' },
          ]}
          onClick={this.handleClick}
          current={current}
        />
      </View>
    );
  }
}
